<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800">
    <title>营养标签</title>
</head>
<body>
    <div class="label">
        <header>
            <h1 class="bold">Nutrition Facts</h1>
            <div class="divider"></div>
            <p>8 servings per container</p>
            <p><span class="bold">Serving size</span>  <span class="bold">2/3 cup (55g)</span></p>
        </header>
        <div class="divider large"></div>
        <div class="calories">
            <!-- calories头部样式涉及标签较多 需合理运用 -->
            <div class="head bold">
                <div class="head-left"><h2>Amount per serving</h2><p>Calories</p></div>
                <span>230</span>
            </div>
            <div class="divider medium"></div>
            <div class="daily-value small-text">
                <p class="bold right no-divider">% Daily Value *</p>
                <div class="divider"></div>
                <p><span><span class="bold">Total Fat </span>8g</span><span class="bold">10%</span></p>
                <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
                <div class="divider"></div>
                <p class="indent no-divider">Trans Fat 0g</p>
                <div class="divider"></div>
                <p><span><span class="bold">Cholesterol</span> 0mg</span><span class="bold">0%</span></p>
                <p><span><span class="bold">Sodium</span> 160mg</span><span class="bold">7%</span></p>
                <p><span><span class="bold">Total Carbohydrate</span> 37g</span><span class="bold">13%</span></p>
                <p class="indent no-divider">Dietary Fiber 4g</p>
                <div class="divider"></div>
                <p class="indent no-divider">Total Sugars 12g</p>
                <div class="divider double-indent"></div>
                <p class="double-indent no-divider"><span>Includes 10g Added Sugars</span><span class="bold">20%</span></p>
                <div class="divider"></div>
                <!-- 写到一个span中 避免space-between布局 -->
                <p class="no-divider"><span><span class="bold">Protein </span>3g</span></p>
                <div class="divider large"></div>
                <p>Vitamin D 2mcg <span>10%</span></p>
                <p>Calcium 260mg <span>20%</span></p>
                <p>Iron 8mg <span>45%</span></p>
                <p class="no-divider">Potassium 235mg <span>6%</span></p>
            </div>
        </div>
        <div class="divider medium"></div>
        <div class="foot">
            * The % Daily Value (DV) tells you how much a nutrient in a serving of food contributes to a daily diet. 2,000 calories a day is used for general nutrition advice.
        </div>
    </div>
</body>
</html>